<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart"/>
</template>

<script>
// 完成加载过程
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/radar') // 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import { LegendComponent } from 'echarts/components'
echarts.use([LegendComponent])

export default {
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({
      radar: {
        // shape: 'circle',
        name: {
          textStyle: {
            color: '#a9a9a9'
          }
        },

        // 每个区域的最高值
        indicator: [
          { name: '逻辑思维', max: 10 },
          { name: '高阶技术', max: 10 },
          { name: '理论基础', max: 10 },
          { name: '基础知识', max: 10 },
          { name: '题目相关', max: 10 }
        ],
        nameGap: 5,
        splitArea: {
          show: true,
          areaStyle: {
            color: 'rgba(0,0,0,0.3)' // 图表背景的颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: 'rgba(255,255,255,.1)' // 设置网格的颜色
          }
        }
      },
      series: [
        {
          type: 'radar',
          symbolSize: 1, // 拐点的大小
          areaStyle: {
            normal: {
              width: 1,
              opacity: 1
            }
          },
          data: [
            {
              value: [7, 5, 6, 7, 8, 5],
              // 设置区域边框和区域的颜色
              itemStyle: {
                normal: {
                  color: 'rgba(0,191,255,1)',
                  lineStyle: {
                    color: 'rgba(255,225,0,.3)'
                  }
                }
              }
            }
          ]
        }
      ]
    })
  }
}
</script>

<style>
.radar-echart {
  width: 220px;
  height: 150px;
  margin: auto;
}
</style>
